<script lang="ts" setup>
// import HelloWorld from '@/components/HelloWorld.vue';
import SelectorInfo from '@/components/SelectorInfo.vue';
import { RequestDTO } from '@/dto/general';

const eleInfo = ref({
  num: 0
})

const sendToContent = (data: object, action:string) => {
  var message: RequestDTO = new RequestDTO(
    "popup",
    "content",
    data,
    action
  );
  browser.tabs.query({"active": true}).then((tabs) => {
    if(tabs.length == 0 || tabs[0].id == undefined){
      console.log("error - no tabs")
      return 
    }
    browser.tabs.sendMessage(tabs[0].id, message)
  })
}

const startListeningPort = () => {
  browser.runtime.onConnect.addListener((port) => {
    port.onMessage.addListener((message: RequestDTO, port) => {
      if (message.to == "popup") {
        if (port.name == "content") {
          console.log("popup -  from content" + JSON.stringify(message));
          dealContent(message)
        }
        if (port.name == "background") {
          console.log("popup -  from background" + JSON.stringify(message));
        }
      }
    });
  });
};


const dealContent = (message: RequestDTO) => {
  if(message.action === "sendSelectorInfo"){
    var prop = "num" as keyof typeof message.data
    eleInfo.value.num = message.data[prop]
  }
}

const getContentEleList = () => {
  var data = {}
  sendToContent(data, "getEleList")
}


onMounted(() => {
  startListeningPort()

  getContentEleList()
})
</script>

<template>
  <SelectorInfo :num="eleInfo.num"></SelectorInfo>
</template>

<style scoped>
.logo {
  height: 8em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #54bc4ae0);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
